<template>
  <div class="test_container">
    <h3>Test.vue模板---{{ books.length }}本图书</h3>
  </div>
</template>

<script>
export default {
  props:['info'],
  data(){
    return {
      message:'hello vue.js',
      books: []
    }
  },
  methods:{
    show(){
      console.log('调用了test组件的show方法');
    },
    // 使用ajax请求图片数据
    initBookList(){
      const xhr = new XMLHttpRequest();
      xhr.addEventListener('load',()=>{
        const result = JSON.parse(xhr.responseText)
        console.log(result)
        this.books = result.data
      })
      xhr.open('GET','http://www.liulongbin.top:3006/api/getBooks');
      xhr.send();
    }
  },
  // 创建阶段的第一个声明函数
  beforeCreate() {
      // console.log(this.info)
      // console.log(this.message)
      // this.show()
    },
    created(){
      // console.log(this.info)
      // console.log(this.message)
      // this.show()
      this.initBookList();
    }
}
</script>

<style lang="less" scoped>
    .test_container{
        background-color:pink;
        height:200px;
    }
</style>